<script setup>

import {onMounted, reactive, ref} from "vue";
import store from "@/store";
import router from "@/router";
import {useRoute} from "vue-router";
import {cancel, find, update} from "@/api/user";
const route = useRoute();

const formLabelWidth = "100px";

const data = ref({
  image: "",
  image_before: "",
  sex: ""
});

const server_image = ref("");

onMounted(() => {
  data.value.id = route.params.id;
  find(data.value).then((res) => {
    server_image.value = res.data.image;
    data.value = res.data;
  });
});


const changeImg = (res) => {
  data.value.image_before = data.value.image;
  data.value.image = res.data;
}


// 提交当前更改
const commit_change = () => {
  if(data.value.image_before !== "") {
    cancel(data.value.image_before);
  }
  data.value.id = route.params.id;
  console.log(data.value);
  console.log(typeof data.value.sex)
  update(data.value).then((res) => {
    console.log(res);
    router.push("/users");
  });
}

const cancel_change = () => {
  if(data.value.image !== server_image.value){
    cancel(data.value).then((res) => {
      router.push("/users");
      data.value.image = data.value.image_before;
      data.value.image_before = "";
    });
  }
  router.push("/users");
}


</script>

<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">用户详情页</h1>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item
      ><a href="/message">待处理消息</a></el-breadcrumb-item
      >
      <el-breadcrumb-item
      ><a href="/users">用户列表</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>{{data.username}}的详情页</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
      <el-form :model="data">
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              name="imageFile"
              action="/api/upload/image"
              :show-file-list="false"
              :on-success="changeImg"
          >
            <img v-if="data.image" :src="data.image" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="data.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="data.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="data.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="data.sex" placeholder="请选择性别">
            <el-option label="男" value="MALE" />
            <el-option label="女" value="FEMALE" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="data.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button type="primary" plain @click="commit_change">提交修改</el-button>
          <el-button type="warning" plain @click="cancel_change">取消修改</el-button>
        </el-form-item>

      </el-form>


  </el-card>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>